<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE HTML>
<html>
  <head>
    <title>注册</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/font-awesome.min.css"  />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"  />
</head>
<script src="${pageContext.request.contextPath}/js/jquery-1.6.3.js"></script>
 <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
  <script src="${pageContext.request.contextPath}/css/unslider.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(e){
/* 实时监听input改变 */
$("#username").bind('input propertychange',function(e){
var pattern = /[\w]{8,20}/
var email=$("#username").val();
if(email==''){
$("#unSpan").html("用户名不能为空");
$("#unSpan").show();
$("form").attr("action","#");
}else if(!pattern.test(email)){
$("#unSpan").html("用户名格式不正确（只能包含数字和字母长度不低于8位，不超过20位）");
$("#unSpan").show();
$("form").attr("action","#");
}else{
$("#unSpan").hide();
$("form").attr("action","${pageContext.request.contextPath}/user/register.action");
} 
});
$("#password").bind('input propertychange',function(e){
var pwd1=$("#password").val();
if(pwd1==''){
$("#spanPwd1").html("密码不能为空");
$("#spanPwd1").show();
$("form").attr("action","#");
}else if(pwd1.length<8){
$("#spanPwd1").html("密码不能少于8位，或者高于15位");
$("#spanPwd1").show();
$("form").attr("action","#");
}else{
$("#spanPwd1").hide();
$("form").attr("action","${pageContext.request.contextPath}/user/register.action");
}
});
$("#password2").bind('input propertychange',function(e){
var pwd2=$("#password2").val();
if(pwd2==''){
$("#spanPwd2").html("密码不能为空");
$("#spanPwd2").show();
$("form").attr("action","#");
}else if(pwd2!=$("#password").val()){
$("#spanPwd2").html("两次密码不一致");
$("#spanPwd2").show();
$("form").attr("action","#");
}else{
$("#spanPwd2").hide();
$("form").attr("action","${pageContext.request.contextPath}/user/register.action");
}
});
$("#phoneNum").bind('input propertychange',function(e){
var phone=$("#phoneNum").val();
var num=/[0-9]{11}/
if(phone==''){
$("#spanPhoneNum").html("电话不可以为空");
$("#spanPhoneNum").show();
$("form").attr("action","#");
return false;
}else if(!num.test(phone)){
$("#spanPhoneNum").html("请输入正确的电话号码");
$("#spanPhoneNum").show();
$("form").attr("action","#");
return false;
}else{
$("#spanPhoneNum").hide();
$("form").attr("action","${pageContext.request.contextPath}/user/register.action");
}
});
$("#check").click(function () {  
        var username=$("#username").val();
       if(username==""){
       $("#checkResult").html("不能为空");	
       }else{
        var val={"username":username};
        var url="${pageContext.request.contextPath}/user/isUser.action";
        var args={"username":val};
		$.post(url,val,function(data){
			$("#checkResult").html(data.result);
			if(data.result=="可用"){
			$("form").attr("action","${pageContext.request.contextPath}/user/register.action");
			}else{
			$("form").attr("action","#");
			}
		});
       }
		return false;
});   	
$("#submit").click(function(){
			var name=$("#name").val();
			if(name.length>8){
			$("#spanName").html("昵称不能超过6个字符");
			return false;
			}else if(name==""){
			$("#spanName").html("昵称不能为空");
			return false;
			}
});	
/*导航栏移动效果 */
$("#topdiv1").hover(function(){
	$(this).css("background","#FFD39B");
	$(this).css("color","#fff");
	$("#topdiv2").css("background","#fff");
	$("#topdiv2").css("color","#000");
	$("#topdiv2").css("height","59px");
	$(this).css("height","60px");
},function(){
	$(this).css("background","#fff");
	$("#topdiv2").css("background","#FFD39B");
	$("#topdiv2").css("color","#fff");
	$(this).css("color","#000");
	$("#topdiv2").css("height","60px");
	$(this).css("height","59px");
});
$("#topdiv3").hover(function(){
$(this).css("background","#FFD39B");
	$(this).css("color","#fff");
	$("#topdiv2").css("background","#fff");
	$("#topdiv2").css("color","#000");
	$("#topdiv2").css("height","59px");
	$(this).css("height","60px");
},function(){
$(this).css("background","#fff");
	$("#topdiv2").css("background","#FFD39B");
	$("#topdiv2").css("color","#fff");
	$(this).css("color","#000");
	$("#topdiv2").css("height","60px");
	$(this).css("height","59px");
});
/*点击跳转 */
$("#topdiv1").click(function(){
window.location.href="${pageContext.request.contextPath}"
});
$("#topdiv2").click(function(){
window.location.href="${pageContext.request.contextPath}/register.jsp"
});
$("#topdiv3").click(function(){
window.location.href="${pageContext.request.contextPath}/login.jsp";
});
 });
</script>
   <body >
   		<div style="whdth:100%;height:60px;border-bottom:1px solid #FF7F00;">
   		<img src="${pageContext.request.contextPath}/img/juninglogo.jpg" width="59px" height="59px" style="float:left">
   		<img src="${pageContext.request.contextPath}/img/register.png" height="59px" style="margin-left:100px;float:left">
   		<div class="topdiv" style="margin-left:560px" id="topdiv1">首页</div>
   		<div class="topdiv" id="topdiv2">注册</div>
   		<div class="topdiv" id="topdiv3">登录</div>
   		</div>
     <div style="width: 100%;height: 40%;margin-top:20px;">
			<form action="${pageContext.request.contextPath}/user/register.action" method="post">
					<label style="margin-left: 600px;font-size: 16px">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
					<span style="color: red;margin-left:5px;font-size: 12px" id="unSpan"></span>
					<div class="input-group" style="width: 40%;margin: auto;" >  
					<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
					<input type="text" id="username" placeholder="请输入用户名*" class="form-control" name="username">	
					<button class="btn-success" id="check" style="background: #FF7F00;border:1px solid #EE9572">
					校验是否可用</button> 
					<span style="color:blue;" id="checkResult"></span>
					</div>
					<label style="margin-left: 600px; font-size: 16px;margin-top: 10px">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
					<span style="color: red;margin-left:5px;font-size: 12px" id="spanPwd1"></span>
					<div class="input-group" style="width: 40%;margin: auto;"> 
					<div class="input-group-addon"><span class="fa fa-unlock-alt"></span></div>
					<input type="password" placeholder="请输入您的密码*" class="form-control" name="password" id="password">	
					</div>
					<label style="margin-left: 600px;font-size: 16px;margin-top: 10px">重&nbsp;&nbsp;&nbsp;&nbsp;复&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码</label>
					<span style="color: red;margin-left:5px;font-size: 12px" id="spanPwd2"></span>
					<div class="input-group" style="width: 40%;margin: auto;"> 
					<div class="input-group-addon"><span class="fa fa-unlock-alt"></span></div>
					<input type="password" placeholder="请重复您的密码*" class="form-control" id="password2">	
					</div>
					<label style="margin-left: 600px;font-size: 16px;margin-top: 10px">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</label>
					<span style="color: red;margin-left:5px;font-size: 12px" id="spanPhoneNum"></span>
					<div class="input-group" style="width: 40%;margin: auto;"> 
					<div class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></div>
					<input type="text" placeholder="请输入您的电话*" class="form-control" id="phoneNum" name="phonenum">	
					</div>
					<label style="margin-left: 600px;font-size: 16px;margin-top: 10px">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</label>
					<span style="color: red;margin-left:5px;font-size: 12px" id="spanName"></span>
					<div class="input-group" style="width: 40%;margin: auto;">  
					<div class="input-group-addon"><span class="glyphicon glyphicon-heart-empty"></span></div>
					<input type="text" placeholder="请输入您的昵称*" class="form-control" id="name" name="name">	
					</div>
					<input id="submit" type="submit" class="btn-info" value="提交" style="margin-left: 63%;margin-top: 20px;width:90px;background: #FF7F00;border:1px solid #EE9572;border-radius: 3px;height:35px">
			</form>
     </div>
      	<div style="width:1100px;height:150px;">
			<div style="margin:15px 0 0 540px;color:#595959;font-size:13px;font-weight:600;
			letter-spacing:3px">
			本站由DGW制作,版权归俊宁电器所属.
			</div>
			<div style="margin:15px 0 0 595px;color:#595959;font-size:13px;font-weight:600;
			letter-spacing:3px">
				蜀ICP备20170105号
			</div>
			<div style="margin:15px 0 0 576px;color:#595959;font-size:13px;font-weight:600;
			letter-spacing:3px">
			2017-7-1  ——  2017-9-21
			</div>
	</div>
   </body>
   <style>
   input:hover{
   border-color: #FF7F00;
   }
   .topdiv{
    height:100%;
   width:150px;
   float:left;
   text-align: center;
    font-size: 17px;padding-top:18px;letter-spacing:40px;padding-left: 34px;
   }
   .topdiv:hover{
   cursor: pointer;
   }
   #topdiv2{
 background: #FFD39B;
   color:#fff;
   height:60px;
   }
  
   label {
	color:#FF7F00;
}
   </style>
  
</html>